<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-26 10:46:14
 * @LastEditTime: 2023-06-28 14:55:15
-->
<script setup lang="ts" name="IkSideText">
const props = defineProps({
  // 名称
  name: {
    type: String,
    default: ''
  },
  // 头像
  avatar: {
    type: String,
    default: ''
  },
  // 主文本
  text: {
    type: String,
    default: ''
  },
  // 副文本
  subText: {
    type: String,
    default: ''
  }
})

const { setFileUrl } = useHttpUrl()
const fixUrl = computed(() => setFileUrl(props.avatar))

const showImg = ref(Boolean(props.avatar))
const handError = () => {
  showImg.value = false
}
</script>

<template>
  <div class="side-text">
    <div class="side-left">
      <el-avatar
        :size="50"
        shape="square"
        :src="fixUrl"
        @error="handError"
      >
        <template v-if="!showImg">
          {{ name.slice(-2) }}
        </template>
      </el-avatar>
    </div>
    <div class="side-right">
      <p class="text-over-line">{{ text }}</p>
      <el-tooltip :content="subText">
        <p class="text-over-line">{{ subText }}</p>
      </el-tooltip>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.side-text {
  display: flex;

  .side-left {
    margin-right: 12px;
  }

  .side-right {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;

    p {
      overflow: hidden;
      text-overflow: ellipsis;

      &:last-child {
        color: var(--ik-vice-text-color);
      }
    }
  }
}
</style>
